<!--
 * @Author: 雷佳斌 leijiabin@yunjinhz.com
 * @Date: 2024-03-11 10:21:30
 * @LastEditors: 冯尚新 fengshangxin@yunjinhz.com
 * @LastEditTime: 2024-03-12 19:08:14
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\query\stats\licProcessSearch.vue
 * @Description: 许可证办理统计
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <span>
          <u-icon
            color="#FFF"
            name="more-dot-fill"
            size="38"
            @tap="selectCondit"
          ></u-icon>
        </span>
      </view>
    </theme-navbar>
    <!-- #endif -->
	<!-- #ifdef H5-DINGDING || H5-WECHAT || H5-EMP -->
	<fab-button :content="fContent" @fabtrigger="fabtrigger" />
	<!-- #endif -->
    <view class="content u-page">
      <!-- 内容区 -->

      <u-tabs
        :list="tabList"
        :is-scroll="false"
        :current="tabCurrent"
        @change="change"
      ></u-tabs>

      <view class="page-top">
        <view class="page-title">{{ queryForm.orgName }}</view>
        <view class="row-flex between">
          <view>
            <text class="blod">{{ currTabName }}</text>
            <text class="gery">（户）</text>
          </view>
          <view>
            <text class="gery" style="margin-right: 4rpx">今年</text>
            <text class="blod">{{ currLicTotal.totalValue }}</text>
          </view>
        </view>
        <view class="row-flex between gery">
          <view>查询日期：{{ queryForm.rangeDate }}</view>
          <view class="row-flex">
            <text>同比</text>
            <view style="margin: 0 4rpx">
              <u-icon
                v-if="currLicTotal.totalValueTB >= 0"
                name="arrow-upward"
                color="red"
              ></u-icon>
              <u-icon v-else name="arrow-downward" color="green"></u-icon>
            </view>
            <text>{{ currLicTotal.totalValueTB }}</text>
          </view>
        </view>
      </view>

      <view id="chartBox" style="width: 100%; height: 500rpx"></view>

      <view class="list-wrap">
        <view class="title gery">
          <view>同比情况（户）</view>
          <u-line class="u-line" color="#999"></u-line>
        </view>
        <view v-if="YOYStatisticsList.length" class="list">
          <view
            class="list-item"
            v-for="(item, index) of YOYStatisticsList"
            :key="index"
          >
            <view
              class="list-item-content row-flex between"
              style="padding: 35rpx 0"
            >
              <view class="left row-flex">
                <view
                  :style="`width: 22rpx; height: 22rpx; margin-right: 10rpx; border-radius: 50%; background-color: ${colorList[index]}`"
                ></view>
                <view class="blod">{{ item.title }}</view>
              </view>
              <view class="right row-flex">
                <view class="row-flex">
                  <text class="gery">同比</text>
                  <view style="margin: 0 6rpx">
                    <u-icon
                      v-if="item.totalValueTB >= 0"
                      name="arrow-upward"
                      color="red"
                    ></u-icon>
                    <u-icon v-else name="arrow-downward" color="green"></u-icon>
                  </view>
                  <text class="gery">{{ item.totalValueTB }}</text>
                </view>
                <text class="blod" style="margin-left: 25rpx">
                  {{ item.totalValue }}
                </text>
              </view>
            </view>
            <u-line class="u-line" color="#999"></u-line>
          </view>
        </view>
        <view v-else style="padding: 20rpx 0">
          <u-empty text="数据为空" mode="list"></u-empty>
        </view>
      </view>

      <view class="list-wrap">
        <view class="title gery">
          <view>其他业务情况（户）</view>
          <u-line class="u-line" color="#999"></u-line>
        </view>
        <view v-if="otherBusList.length" class="list">
          <view
            class="list-item"
            v-for="(item, index) of otherBusList"
            :key="index"
          >
            <view class="list-item-content row-flex">
              <view class="left" style="width: 220rpx">
                <view class="blod">{{ item.title }}</view>
              </view>
              <view class="right row-flex" style="width: 100%">
                <view
                  v-for="licItem of item.commonDetailList.filter(
                    (item) => item.title != '合计'
                  )"
                  :key="licItem.title"
                  class="lic-info"
                  style="width: 50%; padding-right: 10rpx"
                >
                  <view class="row-flex">
                    <text class="blod">{{ licItem.totalValue }}</text>
                    <view class="row-flex" style="margin-left: 6rpx">
                      <text class="gery">同比</text>
                      <view style="display: inline-block; margin: 0 6rpx">
                        <u-icon
                          v-if="item.totalValueTB >= 0"
                          name="arrow-upward"
                          color="red"
                        ></u-icon>
                        <u-icon
                          v-else
                          name="arrow-downward"
                          color="green"
                        ></u-icon>
                      </view>
                      <text class="gery">{{ licItem.totalValueTB }}</text>
                    </view>
                  </view>
                  <view class="gery" style="font-size: 32rpx">
                    {{ licItem.title }}
                  </view>
                </view>
              </view>
            </view>
            <u-line class="u-line" color="#999"></u-line>
          </view>
        </view>
        <view v-else style="padding: 20rpx 0">
          <u-empty text="数据为空" mode="list"></u-empty>
        </view>
      </view>

      <u-popup v-model="queryShow" width="80%" mode="right">
        <view class="cearch_title"> 查询条件 </view>
        <u-form
          :model="queryForm"
          label-position="top"
          label-width="auto"
          style="padding: 80rpx 32rpx 160rpx 32rpx"
          ref="uForm"
        >
          <u-form-item label="组织机构" right-icon="arrow-right">
            <u-input
              :disabled="true"
              placeholder="请选择"
              v-model="queryForm.orgName"
              :custom-style="pointerStyle"
              @click="choiceOrg"
            >
            </u-input>
          </u-form-item>
          <u-form-item label="日期" prop="dateRange">
            <u-input
              v-model="queryForm.rangeDate"
              placeholder="请选择日期区间"
              type="text"
              :disabled="true"
              @click="showDateRange = true"
            ></u-input>
            <u-icon
              :color="$theme.u_type_primary"
              class="i-lay-m"
              name="calendar"
              size="48"
            ></u-icon>
          </u-form-item>
        </u-form>
        <view class="submit-btns btn-other-cls">
          <u-button plain class="u-btn" type="primary" @click="resetBtn">
            重置
          </u-button>
          <u-button class="u-btn" type="primary" @click="confirmBtn">
            确定
          </u-button>
        </view>

        <!-- 时间选择器 -->
        <u-calendar
          max-date="2099-12-31"
          v-model="showDateRange"
          mode="range"
          @change="dateChange"
        ></u-calendar>
      </u-popup>

      <!-- 组织机构选择 -->
      <u-popup mode="bottom" height="80%" v-model="orgSelectShow">
        <org-select
          :cleanParentOrg="true"
          :isHybrid="true"
          limitNodeType="all"
          treeType="zm-comp"
          @choose="handlerChooseOrg"
        ></org-select>
      </u-popup>
    </view>
  </view>
</template>
  
  <script>
import * as echarts from "echarts";
import OrgSelect from "@/components/org-select.vue";
import util from "@/common/util";
import queryService from "@/service/query/query.service";
import fabButton from '@/components/uni-fab.vue';

export default {
  components: {
    OrgSelect,
	fabButton
  },
  data() {
    let dateObj = new Date();
    let currYear = dateObj.getFullYear();
    let currMonth =
      dateObj.getMonth() + 1 > 10
        ? dateObj.getMonth() + 1
        : `0${dateObj.getMonth() + 1}`;
    let currDate =
      dateObj.getDate() > 10 ? dateObj.getDate() : `0${dateObj.getDate()}`;
    let dateBegin = `${currYear}-01-01`;
    let dateEnd = `${currYear}-${currMonth}-${currDate}`;

    let user = this.$storage.get(this.$rp.common.USER);
    let orgUuid = user.provOrgUuid;
    let orgName = user.provOrgName;
    switch (user.orgLevel) {
      // 省级
      case 1:
        orgUuid = user.provOrgUuid;
        orgName = user.provOrgName;
        break;
      // 市级
      case 2:
        orgUuid = user.cityOrgUuid;
        orgName = user.cityOrgName;
        break;
      // 县级
      case 3:
        orgUuid = user.townOrgUuid;
        orgName = user.townOrgName;
        break;
      default:
        orgUuid = user.provOrgUuid;
        orgName = user.provOrgName;
        break;
    }
    return {
      user,
      queryForm: {
        orgUuid, // 组织机构uuid
        orgName, // 组织机构名称
        rangeDate: `${dateBegin}~${dateEnd}`,
        dateBegin,
        dateEnd,
      },
      showDateRange: false,
      // h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
      pointerStyle: {
        marginRight: "5px",
        pointerEvents: "none !important",
      },
      // h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
      queryShow: false,
      orgSelectShow: false,
      list: [],
      tabList: [],
      tabCurrent: 0,
      licBusList: [],
      otherBusList: [],
      colorList: ["#3aa1ff", "#36cbcb", "#4ecb72"],
	  fContent: [{
	  	iconPath: require('@/static/sou.png'),
	  	selectedIconPath: require('@/static/sou.png'),
	  	text: '筛选',
	  	active: false,
	  }],
    };
  },
  computed: {
    currTabName() {
      if (this.tabList.length) {
        return this.tabList[this.tabCurrent].name;
      }
      return "-";
    },
    // 当前许可合计数据
    currLicTotal() {
      let data = {};
      if (this.licBusList.length) {
        data = this.licBusList[this.tabCurrent].commonDetailList.find(
          (item) => item.title == "合计"
        );
      }
      return data;
    },
    // 同比情况列表
    YOYStatisticsList() {
      let currLicBusData = this.licBusList[this.tabCurrent];
      return currLicBusData
        ? currLicBusData.commonDetailList.filter((item) => item.title != "合计")
        : [];
    },
  },
  // 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
  mounted() {
    this.loadData(this.queryForm);
  },
  methods: {
	  fabtrigger(btn) {
	  	if (btn.index == 0) {
	  		this.queryShow = true;
	  	}
	  },
    change(index) {
      this.tabCurrent = index;
      this.initChart();
    },
    dateChange(e) {
      this.queryForm.dateBegin = e.startDate;
      this.queryForm.dateEnd = e.endDate;
      this.queryForm.rangeDate = `${e.startDate}~${e.endDate}`;
    },
    confirmBtn() {
      this.loadData(this.queryForm);
    },
    resetBtn() {
      this.queryForm = {};
    },
    choiceOrg() {
      this.orgSelectShow = true;
    },
    selectCondit() {
      this.queryShow = true;
    },
    handlerChooseOrg(orgs) {
      this.queryForm.orgUuid = orgs[0].id;
      this.queryForm.orgName = orgs[0].name;
      this.orgSelectShow = false;
    },
    loadData(data) {
      this.queryShow = false;
      this.$u.loading("数据查询中...");
      // let param = JSON.parse(JSON.stringify(data));
	  let param = {
		  orgUuid: data.orgUuid,
		  applyDateBegin: data.dateBegin,
		  applyDateEnd: data.dateEnd
	  };
      // delete param.orgName;
      // delete param.rangeDate;
      queryService
        .getLicProcessStatistics(param)
        .then((res) => {
          this.$u.hideLoading();
          if (res.success || res.success == "true") {
            let data = res.data;
            this.licBusList = data.filter((item) => item.type.match(/^31/));
            this.otherBusList = data.filter((item) => !item.type.match(/^31/));
            this.tabList = this.licBusList.map((item) => {
              return { name: item.title };
            });
            this.initChart();
          }
        })
        .catch(() => {
          this.$u.hideLoading();
        });
    },
    initChart() {
      let chart = echarts.init(document.getElementById("chartBox"));
      let seriesData = this.YOYStatisticsList.map((item) => {
        return {
          name: item.title,
          value: item.totalValue,
        };
      });
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: 0,
          left: "center",
        },
        color: this.colorList,
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            data: seriesData,
            hoverAnimation: false,
            label: {
              show: true,
              position: "outside", // 标签显示的位置，'outside' 表示标签在扇形外侧
              formatter: "{b}: {d}%", // 自定义标签的显示格式，{b} 表示数据项名称，{c} 表示数据值，{d} 表示百分比
            },
          },
        ],
      };

      chart.setOption(option);
    },
  },
};
</script>
  
<style lang="scss" scoped>
.page-title {
  font-size: 32rpx;
  font-weight: 600;
  line-height: 80rpx;
}

.row-flex {
  display: flex;
  align-items: center;
  &.between {
    justify-content: space-between;
  }
}

.blod {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.gery {
  color: #999;
  font-size: 26rpx;
}

.cearch_title {
  background-color: #f3f4f5;
  width: 100%;
  height: 82rpx;
  font-size: 32rpx;
  font-weight: 600;
  padding: 22rpx 0 21rpx 32rpx;
  z-index: 999;
  position: fixed;
}

.list-wrap {
  margin-top: 10rpx;
  .title {
    font-size: 32rpx;
    line-height: 80rpx;
    // border-bottom: 1rpx solid #999;
  }
}

.list {
  &-item {
    &-content {
      padding: 20rpx 0;
    }
  }
}
</style>
  